<template>
<div>
     <div class="text" v-for="(v,i) in arr" :key="i">
      <div class="text-left">{{v.num}}</div>
      <div class="text-right">
          <div class="text-right-left">
              <img :src="v.img" alt="">
          </div>
          <div class="text-right-center">
              <h1>{{v.h1}}</h1>
              <b>{{v.b}}</b>
              <p><span><img src="/recommend/4.png" alt="">{{v.span}}</span>
              {{v.p}}
              </p>
          </div>
          <div class="text-right-right">
              <button>{{v.button}}</button>
          </div>

      </div>
  </div>
</div>
 
</template>

<script>
export default {
data(){
    return{
        arr:[{num:1,img:"Leaderboard/1.png",h1:"暗魔领主",b:"Tap  独家",span:"8.1",p:" Roguelike · ARPG",button:"获取"},
        {num:2,img:"Leaderboard/2.png",h1:"地下城与古堡",b:"Tap  独家",span:"7.7",p:"收集·放置·休闲",button:"获取"},
        {num:3,img:"Leaderboard/3.png",h1:" 数码宝贝：新世纪 ",b:"Tap  独家",span:"7.7",p:"童年 · 回合制 · ACG",button:"预定"},
        {num:4,img:"Leaderboard/1.png",h1:"暗魔领主",b:"Tap  独家",span:"8.1",p:" Roguelike · ARPG",button:"获取"},
        {num:5,img:"Leaderboard/2.png",h1:"地下城与古堡",b:"Tap  独家",span:"7.7",p:"收集·放置·休闲",button:"获取"},
        {num:6,img:"Leaderboard/3.png",h1:" 数码宝贝：新世纪 ",b:"Tap  独家",span:"7.7",p:"童年 · 回合制 · ACG",button:"预定"},
        {num:7,img:"Leaderboard/1.png",h1:"暗魔领主",b:"Tap  独家",span:"8.1",p:" Roguelike · ARPG",button:"获取"},
        {num:8,img:"Leaderboard/2.png",h1:"地下城与古堡",b:"Tap  独家",span:"7.7",p:"收集·放置·休闲",button:"获取"},
        {num:9,img:"Leaderboard/3.png",h1:" 数码宝贝：新世纪 ",b:"Tap  独家",span:"7.7",p:"童年 · 回合制 · ACG",button:"预定"},
       
        ]
    }
}
}
</script>

<style scoped>
.text{
    width: 3.592rem;
    height: 0.884rem;
    display: flex;
    justify-content:space-between;
    /* margin-top: 0.15rem; */
}
.text-left{
    width: 0.3599rem;
    height: 0.224rem;
    /* background-color: red; */
    text-align: center;
    line-height: 0.224rem;
    margin: auto;
    font-size: 0.18rem;
    color: #333;
}
.text-right{
    width: 3.2321rem;
    height: 0.884rem;
    /* background-color: orange; */
    display: flex;
    justify-content:space-between;
    margin: auto;
}
.text-right-left{
    width: 0.64rem;
    height: 0.64rem;
    /* background-color: pink; */
    display: flex;
}
.text-right-left img{
    width: 0.64rem;
    height: 0.64rem;
    border-radius: 0.15rem;
    padding-top: 0.15rem;
}
.text-right-center{
    width: 1.6521rem;
    height: 0.64rem;
    /* background-color: red; */
    display: flex;
    flex-direction:column;
    padding-top: 0.15rem;
    margin-left: 0.1rem;
}
.text-right-center h1{
    color: #1D2127;
    font-size: 0.16rem;
    font-weight:normal;
}
.text-right-center b{
    width: 0.58rem;
    color: #fff;
    font-size: 0.11rem;
    background-color: #15C5CE;
    text-align: center;
    border-radius: 0.03rem;
    margin-top:0.05rem;
}
.text-right-center p img{
    width: 0.14rem;
    height: 0.14rem;
    margin-top: 0.05rem;
    margin-right: 0.05rem;
}
.text-right-center p span{
    color: #15C5CE;
    font-size: 0.14rem;
    font-weight: 700;
}
.text-right-center p {
    color: #868C92;
    font-size: 0.12rem;
}
.text-right-right{
    width: 0.70rem;
    height: 0.28rem;
    /* background-color: orange; */
    line-height: 0.28rem;
    margin: auto;
    text-align: center;
    display: flex;
}
.text-right-right button{
    font-size: 0.14rem;
    background-color: #ECFAFB;
    color: #15C5CE;
    width: 0.7rem;
    height: 0.28rem;
    border-radius: 0.5rem;
    border: none;
}
</style>